Soleil sur chambre vide (Sun in a empty room)
Edward Hopper, 1963
Dans ses dernières peintures, Edward Hopper souhaitait exprimer l'expérience de voir et percevoir le monde par le traitement de la
lumière de telle sorte qu'elle devient un objet matériel.
Son accent sur la lumière, la dissolution des objets matériels, et sa capacité à visualiser une réalité interne a reçu son expression
ultime dans Soleil sur Chambre Vide, une de ses dernières peintures.
Pour créer le mur de la fenêtre, j'ai utilisé un plug-in me permettant de faire des CSG avec Three.js, csg.js, ainsi qu'un autre pour faire le lien entre csg et three : ThreeCSG
function createWindowWall(wall_material){
var wallWindow = new THREE.Mesh(new THREE.CubeGeometry(1.5 * METER, WALL_HEIGHT, 0.15 * METER));
var wallWindowCSG = new ThreeBSP(wallWindow);
var windowHole = new THREE.Mesh(new THREE.CubeGeometry(0.5 * METER, 1.2 * METER, 0.3 * METER));
windowHole.position.set(0, 0.55 * METER + windowHole.height / 2, 0);
var windowHoleCSG = new ThreeBSP(windowHole);
var substract_bsp = wallWindowCSG.subtract(windowHoleCSG);
var wallWindowGeom = substract_bsp.toGeometry();
wallWindow = new THREE.Mesh(wallWindowGeom, wall_material);
return wallWindow;
}
J'ai d'abord commencé par créer les deux composants dont j'avais besoin pour la création du mur : le mur et un cube représentant la fenêtre.
Ensuite, je crée un nouvel objet de type ThreeBSP prenant en paramètre l'objet que je veux transformer en géométrie éditable.
Mes nouvelles géométries obtenues, je "soustrais" au mur la partie de la fenêtre. Puis je convertis l'objet restant en géométrie Three.js
Enfin, je peux créer un Mesh avec la géométrie modifiée et un matériel, que je retourne au programme appelant.
Difficultés rencontrées
Au cours du développement de ce TP, j'ai rencontré plusieurs difficultés, notamment l'impossibilité d'importer des textures pour les matériaux. J'ai recopié, puis copié le code donné dans le TP fait en cours, j'ai tenté toutes les solutions que j'ai pu trouver sur internet, utilisé un autre navigateur pour voir si cela venait de celui que j'utilise habituellement. J'ai même constaté avec le débugueur de Firefox que les textures se chargent bien, qu'elles sont bien assignées au matériau, mais pourtant, je n'obtiens que des textures noires. J'ai bien évidemment demandé de l'aide a des personnes de la classe et personne ne voyait d'où pouvait venir le problème. Les chemins des images sont corrects, le code est copié du TP qui fonctionne je le rappelle, j'ai fini par lâcher l'affaire, purement et simplement.
La veille du rendu final, le programme que j'avais fonctionnait, je l'ai testé le lendemain à l'IUT, tout fonctionnait. De retour chez, moi, plus rien ne fonctionnait. Le programme plante sur des lignes critiques (renderer.setClearColorHex(0xAAAAAA, 1.0); et cameraControls.update(delta);) alors que je n'ai apporté aucune modification aux codes. C'est à n'y rien comprendre. Et étant donné que Javascript est TELLEMENT bien fait (comprenez la pointe de sarcasme ici) que la console m'est aussi utile qu'une chaussure pour un cul-de-jatte, internet ne m'est d'aucune aide. Le programme tableau.js est fonctionnel, bien que incomplet (pourtant, ce n'est pas faute d'avoir essayé pendant une semaine).
EDIT : après quelques essais, je suis parvenu à remettre la scène dans la page, mais les murs ont disparu. La console m'indique des erreurs comme quoi des éléments Cross-origin ont besoin de CORS, quoi que puisse être un élément Cross-origin. Bref, je n'ai plus l'énergie pour me battre contre cette usine à gaz.
